/*
 * 职员修改编辑
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-08-06 17:50:44
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>


</style>
<template>
	<div class="v-store-staff-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(80,100)"
			name="store__staff__edit">

			<Form-item
				:label="$t('staff.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('staff.please_enter_name')"
					name="edit__name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('staff.account')"
				prop="account">
				<i-input
					v-model="formValidate.account"
					:placeholder="$t('staff.please_enter_password')"
					name="edit__account"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('staff.password')"
				prop="password">
				<i-input
					v-if="!show_password"
					v-model="formValidate.password"
					:placeholder="$t('staff.please_enter_password')"
					name="edit__password"
					type="password"
					icon="eye"
					@on-click="showPassword()"/>
				<i-input
					v-else
					v-model="formValidate.password"
					:placeholder="$t('staff.please_enter_password')"
					name="edit__password"
					type="text"
					icon="eye"
					@on-click="showPassword()"/>
			</Form-item>

			<Form-item
				:label="$t('staff.email')"
				prop="email">
				<AutoComplete
					v-model="formValidate.email"
					:placeholder="$t('staff.please_enter_email')"
					name="edit__email"
					@on-search="handleSearch">
					<Option
						v-for="item in email_suffixs"
						:value="item"
						:key="item">{{ item }}</Option>
				</AutoComplete>
			</Form-item>

			<Form-item
				:label="$t('staff.phone')"
				prop="phone">
				<i-input
					v-model="formValidate.phone"
					:placeholder="$t('staff.please_enter_phone')"
					name="edit__phone"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('staff.gander')"
				prop="sex">
				<RadioGroup v-model="formValidate.sex">
					<Radio
						name="edit__male"
						label="1">
						<span>{{ $t('staff.male') }}</span>
					</Radio>
					<Radio
						name="edit__female"
						label="2">
						<span>{{ $t('staff.female') }}</span>
					</Radio>
				</RadioGroup>
			</Form-item>

			<!-- <Form-item
				label="出生日期"
				prop="born_at">
				<DatePicker
					v-model="formValidate.born_at"
					type="date"
					placeholder="选择出生日期"
					@on-change="changeDate"/>
			</Form-item> -->

			<Form-item
				:label="$t('staff.role')"
				prop="role_name">
				<Select
					v-model="formValidate.role_name"
					:placeholder="$t('staff.please_select_role')"
					clearable
					name="edit__role_name"
					transfer>
					<Option
						v-for="( staff , key ) in staffRoles"
						:value="staff.name"
						:key="key">{{ staff.name }}</Option>
				</Select>
			</Form-item>

			<Form-item>
				<Button
					name="edit__submit"
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('staff.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate';
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'StaffEdit',
	mixins: [labelWidthMixin],
	props: {
		staffDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		staffRoles: {
			type: Array,
			default() {
				return [];
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {

			email_suffixs: [], // 自动补全email后缀

			real_date: '', // 用于存储格式化之后的date

			show_password: false, // 是否为明文密码

			formValidate: {

				name: '', // 职员姓名

				account: '', // 账号

				password: '', // 密码

				email: '', // 邮箱

				phone: '', // 电话

				sex: '1', // 性别

				// born_at: '', // 时间

				role_name: '', // 职员身份
			}, // 更新职员信息时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { field: this.$t('staff.password'), length: 6 }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.email') }), // '邮箱不能为空',
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: this.$t('staff.email') }), // '邮箱格式不合法',
						trigger: 'blur,change',
					},
				],
				phone: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.phone') }), // ''电话不能为空',
						trigger: 'blur,change',
					},
					{
						validator: validatePhone,
						trigger: 'blur,change',
					},
				],
				sex: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.gander') }), //  '性别不能为空',
						trigger: 'blur,change',
					},
				],
				// born_at: [
				// 	{ type: 'date', message: '出生日期不能为空', trigger: 'blur,change' },
				// ],
				role_name: [
					{ required: true, message: '职员角色不能为空', trigger: 'blur,change' },
				],
			},

		};
	},
	watch: {
		staffDetail() {
			if (this.staffDetail) {
				this.formValidate.name = this.staffDetail.name;
				this.formValidate.account = this.staffDetail.account;
				this.formValidate.email = this.staffDetail.email;

				this.formValidate.phone = this.staffDetail.phone;
				this.formValidate.sex = String(this.staffDetail.sex);

				// this.formValidate.born_at = this.staffDetail.born_at;
				this.real_date = this.staffDetail.born_at;

				this.formValidate.role_name = this.staffDetail.roles && this.staffDetail.roles.length > 0 ? String(this.staffDetail.roles[0].name) : '';
			}
		},

		showModal() {
			if (!this.showModal) {
				this.formValidate.password = '';
			}
		},
	},
	methods: {

		/**
         * 拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

		/**
         * 账号密码显示与隐藏
         * @return {undefined}
         */

		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 改变日期之后的回调
         * @param  {string} date {格式化后的date}
         * @return {undefined}
         */
		changeDate(date) {
			this.real_date = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					const form_data = {
						_method: 'PUT',

						name: this.formValidate.name,

						account: this.formValidate.account,

						password: this.formValidate.password,

						email: this.formValidate.email,

						phone: this.formValidate.phone,

						sex: this.formValidate.sex,

						// born_at: this.real_date,

						role_name: this.formValidate.role_name,
					};

					this.$emit('update', this.staffDetail.id, form_data);
				} else {
					this.$Message.error(this.$t('common.invalid_form_data'));
				}
			});
		},

	},
};
</script>
